<template>
  <user-page class="contract-box">
    <u-popup :show="data.show" mode="bottom">
      <view class="popup">
        <view class="popup-title flex">
          <view class="cancle" @click="close"> 取消</view>
          <view class="title">
            企业员工
          </view>
          <view class="sure" @click="form.submit()"> 确定</view>
        </view>
        <view class="singe-box">
          <view class="flex" style="justify-content: space-between;align-items: center;margin-bottom: 18rpx;">

            <view style="width: 600rpx; margin:auto;">
              <u-search @search="search(1)" @clear="search(2)" style="width: 200rpx;"
                        placeholder="输入手机号快捷搜索" v-model="keyword" bgColor="#ffffff"
                        :showAction="false"></u-search>
            </view>
          </view>
          <scroll-view scroll-y="true"
                       style="widht:100%;min-height: 200rpx; max-height: 400rpx;">
            <view class="singer-item" v-for="(item, index) in data.pageList" :key="index">
              <u-radio-group v-model="data.changeVal">
                <u-radio @change='page.change(item)' shape="circle" :label='item.show_info' :value='index'
                         :name='index'>
                </u-radio>
              </u-radio-group>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </user-page>
</template>
<script setup>
import {
  reactive,
  ref
} from "vue";
import {
  defineEmits
} from 'vue';
import {
  companyUserPageList,
  memberPageList,
} from "../api/module/contract";
import {
  isObjectEmpty, msg,
  objClear, phoneSecret,
} from "../utils/common";
import {
  onShow
} from "@dcloudio/uni-app";

const keyword = ref('');
const formRef = ref(null);
const emit = defineEmits(['return-user']);
const form = reactive({
  data: ref({
    type: '',
  }),
  submit: () => {
    if (!isObjectEmpty(form.data)) {
      return msg('请选择抄送人');
    }

    emit('return-user', form.data);
    close();
    //清空数据，防止第二次打开数据继续存在
    keyword.value = '';
    form.data = ref({});
    data.pageList = [];
  }
});
const data = reactive({
  changeVal: null,
  show: ref(false),
  pageList: [],
});

const page = reactive({
  clearChange: function () {
    data.changeVal = null;
  },
  query: {
    cellphone: '',
  },
  change: (item) => {
    console.log(item);
    form.data = item;
  },
  queryList: () => {
    if (!data.show) {
      return;
    }

    companyUserPageList({
      cellphone: keyword.value,
      type: form.type,
    }).then(res => {
      let arr = res.map(item => {
        return {
          ...item,
          ...{
            isCheck: false,
          }
        }
      })
      data.pageList = arr;
    });
  },
});
const search = (type) => {
  if (type == 2) {
    keyword.value = ''
  }
  data.pageList = [];
  page.queryList();
}

const open = (type) => {
  data.show = true;
  form.type = type;
  page.queryList();
}
const close = () => {
  data.show = false;
  data.pageList = [];
  form.data = objClear(form.data);
  page.clearChange();
}
onShow(() => {
});
defineExpose({
  open,
  close
});
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>